import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  Image,
} from 'react-native';


import TImage from '../../components/TImage';
import TRefreshComponent from '../../components/TRefreshComponent';
import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import Constants from '../../common/Constants';
import Config from '../../config';
import QuanziItemView from './QuanziItemView';
import CommonDataListView from '../common/CommonDataListView';
import QZ_RequestQuanziListAction from '../../actions/quanzi/QZ_RequestQuanziListAction';

export default class QuanziListView extends CommonDataListView {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={[this._getStyle(), {backgroundColor:"#00000000"}]}>
        {this._renderEmpty()}
        <TRefreshComponent style={{width:this._getStyle().width, height:this._getStyle().height - SizeUtils.translateDesignHeightToCode(this.props.isInster?0:100)}}
          ref = {(ref) => {this._pullRefresh = ref}}
          onRenderHeader = {this._onRenderHeader.bind(this)}
          onRefresh = {this._onRefresh.bind(this)}
          onPressItem = {this._onPressItem.bind(this)}
          onRenderItem = {this._onRenderItem.bind(this)}
          onRenderFooter = {this._renderFooter.bind(this)}
          autoInitRequest = {this.props.autoInitRequest}
          useLoadMore = {this._useLoadMore}
          useRefresh = {this.props.useRefresh}
          itemClickEnable = {this._itemClickEnable}
          onScroll = {this._onScroll.bind(this)}
          isRowWrap = {this.props.isRowWrap}
          dataKey={"board_id"}
        />
        {this.props.isInster?null:this._renderBottomView()}
      </View>
    )
  }

  _getStyle() {
    return {height:this.props.style.height - SizeUtils.translateDesignHeightToCode(15)};
  }

  _onRenderItem(data, index) {
    return (<QuanziItemView data={data} />);
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.quanzi_content,data);
  }

  componentWillUpdate(nextProps, nextState, nextContext) {
    super.componentWillUpdate(nextProps,nextState);

    if(nextProps.quanziData && nextProps.quanziData.isBack){
      //圈子详情页刷新用
      nextProps.quanziData.isBack = false;
      this._pullRefresh.doRefresh();
    }else if( nextProps.pageData && nextProps.pageData.routeData && nextProps.pageData.routeData.isBack){
       //我的圈子刷新用
      nextProps.pageData.routeData.isBack = false;
      this._pullRefresh.doRefresh();
    }
  }
  _requestData(page) {
    new QZ_RequestQuanziListAction().call(this, {page:page})
  }
  _renderBottomView() {
    return (
      <View
        style={{flexDirection: 'row',justifyContent:'space-between', alignItems:"center",
          width:SizeUtils.getWindowSize().width, paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
          height:SizeUtils.translateDesignHeightToCode(103),
          borderColor:"#eeeeee", borderTopWidth:SizeUtils.translateDesignNumToCode(3),
          position:"absolute", bottom:0,
        }} >
        <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(10), color: '#999999', fontSize:SizeUtils.translateFontSizeToCode(28)}}>
              更多精彩圈子等你加入
          </Text>
        <TouchableOpacity onPress={this.gotoAllPage.bind(this)}
          style={{alignItems:"center", backgroundColor: '#db3132',  borderRadius: 6,
          width:SizeUtils.translateDesignWidthToCode(260),justifyContent:"center",
            height: SizeUtils.translateDesignHeightToCode(74)}}
        >
          <Text
            style={{color:'#ffffff', fontSize:SizeUtils.translateFontSizeToCode(28), }}
          >去看看</Text>
        </TouchableOpacity>
      </View>
    )
  }

  gotoAllPage(){
    this.gotoPage(Config.pages.quanzi_all_list);
  }
}
